﻿@using DTcms.Common;
@{
    ViewBag.Title = "内容类别";
    int channel_id = ViewBag.channel_id;
}
@section HeaderContent{
    <style type="text/css">
        .btn{height:15px}
        .tree-list .col-1{width:6%;text-align:center}
        .tree-list .col-2{width:6%}
        .tree-list .col-3{width:25%}
        .tree-list .col-4{width:10%}
        .tree-list .col-5{width:10%;text-align:center}
        .tree-list .col-6{width:10%;text-align:center}
        .tree-list .col-7{width:15%}
        .tree-list .col-8{width:12%}
    </style>
}
<form id="form1" class="layui-form">
    <div class="pageheader">
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li><a href="javascript:;"><i class="iconfont icon-home1"></i> 首页</a> </li>
                <li><a href="javascript:;">内容管理</a> </li>
                <li><a href="javascript:;">内容类别</a> </li>
            </ul>
        </div>
    </div>
    <div class="layui-fluid">
        <div class="layui-card layui-tab">
            <div class="layui-card-body table-tool-mini">
                <div class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-btn-group">
                                <a data-type="btnAdd" class="layui-btn icon-btn layui-btn-normal layui-btn-sm" href="../article/category_edit?action=@DTEnums.ActionEnum.Add&channel_id=@channel_id"><i class="iconfont icon-close1"></i><span> 新增</span></a>
                                <a data-type="btnCheckAll" class="layui-btn icon-btn layui-btn-normal layui-btn-sm"><i class="iconfont icon-selected"></i><span> 全选</span></a>
                                <a data-type="btnDelete" class="layui-btn icon-btn layui-btn-normal layui-btn-sm"><i class="iconfont icon-delete"></i><span> 删除</span></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-container">
                    <div class="tree-list">
                        <div class="thead">
                            <div class="col col-1">选择</div>
                            <div class="col col-2">编号</div>
                            <div class="col col-3">类别名称</div>
                            <div class="col col-4">调用别名</div>
                            <div class="col col-5">显示单页</div>
                            <div class="col col-6">状态</div>
                            <div class="col col-7">排序</div>
                            <div class="col col-8">操作</div>
                        </div>
                        <ul id="ltable"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script type="text/html" id="GridCategory">
    <li class="layer-{{d.class_layer}}">
        <div class="tbody">
            <div class="col col-1 checkall">
                <input type="checkbox" value="{{d.id}}" lay-skin="primary" />
            </div>
            <div class="col col-2">
                {{d.id}}
            </div>
            <div class="col index col-3">
                <a href="{{d.link_url}}" target="_blank" style="color:{{d.color}};">{{d.title}}</a>
            </div>
            <div class="col col-4">
                {{d.call_index}}
            </div>
            <div class="col col-5">
                <i class="simple {{d.is_page==1?'text-warning icon-check':'text-success icon-close'}}"></i>
            </div>
            <div class="col col-6">
                <input type="checkbox" name="is_lock" value="{{d.id}}" lay-skin="switch" {{d.is_lock==0?'checked':''}} lay-text="显示|隐藏" lay-filter="lock" />
            </div>
            <div class="col col-7">
                <input class="sort" onkeydown="return checkNumber(event);" type="text" value="{{d.sort_id}}" data-id="{{d.id}}"/>
            </div>
            <div class="col col-8">
                <a href="../article/category_edit?action=@DTEnums.ActionEnum.Add&channel_id=@channel_id&id={{d.id}}" class="layui-btn layui-btn-normal layui-btn-xs"><i class="fa fa-plus"></i> 添加子类</a>
                <a href="../article/category_edit?action=@DTEnums.ActionEnum.Edit&channel_id=@channel_id&id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-xs"><i class="fa fa-edit"></i> 修改</a>
            </div>
        </div>
    </li>
</script>
@section Scripts{
    <script type="text/javascript">
        layui.use(['form', 'cmswh', 'dataGrid'], function () {
            var form = layui.form, cmswh = layui.cmswh, dataGrid = layui.dataGrid;
            
            var ins = dataGrid.render({
                elem: '#ltable',
                templet: '#GridCategory',
                data: 'categoryList?channel_id=@ViewBag.channel_id',
                page: false,
                done: function (dataList, curr, count) {
                    form.render();
                    cmswh.initCategoryHtml('.tree-list', 1); //初始化分类的结构
                    $('.tree-list').initCategoryTree(false); //初始化分类的事件
                    sortChange();
                }
            });
            //监听状态操作
            form.on('switch(lock)', function (obj) {
                cmswh.request("CategoryLock?channel_id=@ViewBag.channel_id", "POST", { id: this.value, is_lock: obj.elem.checked });
            });

            var active = {
                btnDelete: function () {
                    cmswh.batIds('CategoryDelete?channel_id=@channel_id', '本操作会删除本类别及下属子类别，是否继续？');
                },
                btnCheckAll: function () {
                    cmswh.checkAll(this);
                    form.render('checkbox');
                }
            };
            $('.layui-inline .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            function sortChange() {
                $(".sort").change(function () {
                    var obj = $(this);
                    var id = obj.data("id");
                    var sort_id = obj.val();
                    cmswh.request("CategorySort?channel_id=@channel_id", "POST", { id: id, value: sort_id, field: "sort_id" });
                })
            }
        });
    </script>
}